<template>
	<div class="aboutSee">
		<NewsHeader 
			:isInput="dataArr.isInput" 
			:iconArr="dataArr.iconArr" 
			:placeholder="dataArr.placeholder" 
			:aimUrl = 'dataArr.aimUrl'
			:rightUrl='dataArr.rightUrl'
		/>
		<PublicTitle
		   :publictitle= 'publictitle'
		/>
		<div class="aboutSeeCont">
			<div class="aboutSeeDetail" v-for="(item,index) in houseorderArr" :key='index'>
				<div class="aboutSeeDetailLeft">
					<img :src="item.imgUrl" alt="">
				</div>
				<div class="aboutSeeDetailRight">
					<p><span>预约时间：{{ item. time }}</span></p>
					<p><span>{{ item.title }}</span></p>
					<p><span>{{ item.patters }}</span></p>
					<p><span>{{ item.address }}</span></p>
					<p>
						<span>{{ item.mode }}</span>
						<span>{{ item.price }}/月</span>
					</p>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
import NewsHeader from '../../components/shopheader'
import PublicTitle from './components/publictitle'
	export default{
		name:'aboutSee',
		components:{
			NewsHeader,
			PublicTitle
		},
		data(){
			return{
					dataArr:{
						isInput:false,
						iconArr:[
							{
								iconLeft:"icon-zuojiantou",
								iconRight:""
							}
						],
						placeholder:"约看",
						aimUrl:'/layout/mine',
						rightUrl:''
					},
					publictitle:[
						{
							titleleft:'未完成的预约',
							titlelright:'已完成的预约'
						}
					],
					houseorderArr:[
						{
							time:'2017/12/9',
							imgUrl:require('../../assets/images/mine/img_tu03@2x.png'),
							title:'东城区-安外大街5号院',
							patters:'1室1厅1卫—30m2',
							address:'距离5号线和平里北街1057米',
							mode:'整租',
							price:'4500'
						},
						{
							time:'2017/12/9',
							imgUrl:require('../../assets/images/mine/img_tu03@2x.png'),
							title:'东城区-安外大街5号院',
							patters:'1室1厅1卫—30m2',
							address:'距离5号线和平里北街1057米',
							mode:'整租',
							price:'4500'
						}
					]
			}
		}
	}
</script>
<style scoped lang="less">
.aboutSee{
	width: 100%;
	padding-top: 88 / 100rem;
	background-color: #ededed;
	box-sizing: border-box;
	.aboutSeeCont{
		width: 100%;
		padding-left: 20 / 100rem;
		padding-top: 23 / 100rem;
		padding-right: 20 / 100rem;
		box-sizing: border-box;
		.aboutSeeDetail{
			width: 710 / 100rem;
			height: 238 / 100rem;
			border-radius: 10 / 100rem;
			background-color: #fff;
			margin-bottom: 16 / 100rem;
			padding: 17 / 100rem 20 / 100rem 25 / 100rem 20 / 100rem;
			box-sizing: border-box;
			position: relative;
			.aboutSeeDetailLeft{
				margin-right: 20 / 100rem;
				img{
					width: 290 / 100rem;
					height: 196 / 100rem;
				}
			}
			.aboutSeeDetailRight{
				p:nth-child(1){
					span{
						color: #ff5555;
						font-size: 30 / 100rem;
					}
				}
				p:nth-child(2){
					margin-top: 5 / 100rem;
					span{
						color: rgba(0, 0, 0, 0.8);
						font-size: 26 / 100rem;
					}
				}
				p:nth-child(3){
					margin-top: 8 / 100rem;
					margin-bottom: 8 / 100rem;
					span{
						color: rgba(0, 0, 0, 0.8);
						font-size: 20 / 100rem;
					}
				}
				p:nth-child(4){
					span{
						color: rgba(0, 0, 0, 0.8);
						font-size: 18 / 100rem;
					}
				}
				p:nth-child(5){
					margin-top: 18 / 100rem;
					span:nth-child(1){
						display: inline-block;
						width: 93 / 100rem;
						height: 42 / 100rem;
						text-align: center;
						line-height: 42 / 100rem;
						border: 1px solid #618698;
						border-radius: 6 / 100rem; 
						color: rgba(97, 134, 152, 0.9);
						font-size: 26 / 100rem;
					}
					span:nth-child(2){
						display: inline-block;
						font-size: 26 / 100rem;
						color: #ff5555;
						float: right;
						margin-top: 10 / 100rem;
					}
				}
			}
		}
		.aboutSeeDetail>div{
			float: left;
		}
	}
}
</style>